<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        :root{
            --water-size:10px;
            --water-color-from:#5668ce;
            --water-color-to:#00bcd4;
            --bg-color:#031728;
        }
        body{
            overflow:hidden;
            width:100%;
            height:100%;
            background-color:var(--bg-color);
        }
        .rain:nth-child(1){
            --duration:2.7s;
            --delay:1s;
            transform: translate(10%,10%) scale(0.9);
        }
        .rain:nth-child(2){
            --duration:2.1s;
            --delay:1.2s;
            transform: translate(-20%,40%) scale(1.3);
        }
        .rain:nth-child(3){
            --duration:2.3s;
            --delay:2s;
            transform: translate(0%,50%) scale(1.1);
        }
        .rain:nth-child(4){
            --duration:2s;
            --delay:4s;
            transform: translate(10%,0%) scale(0.9);
        }
        .rain:nth-child(5){
            --duration:2s;
            --delay:2.7s;
            transform: translate(-200%,0%) scale(1);
        }
        .rain:nth-child(6){
            --duration:2.5s;
            --delay:0s;
            transform: translate(10%,0%) scale(0.9);}
        .rain:nth-child(7){
            --duration:1.8s;
            --delay:1.3s;
            transform: translate(20%,-40%) scale(1.2);
        }
        .rain:nth-child(8){
            --duration:2.2s;
            --delay:0.5s;
            transform: translate(0%,20%) scale(1);
        }
        .rain:nth-child(9){
            --duration:2s;
            --delay:0.5s;
            transform: translate(0%,-10%) scale(1.3);
        }
        .rain .drop{
            position: absolute;
            top:calc(var(--water-size) * -1);
            left:50%;
            z-index:9;
            transform:translate(-50%,-50%) rotate(-45deg);

            width: var(--water-size);
            aspect-ratio: 1;
            border-radius: 100% 0% 50% 50% / 50% 0% 100% 50%;
            background-image: linear-gradient(45deg,var(--water-color-from),var(--water-color-to));
            animation: rain-animate var(--duration) var(--delay) infinite cubic-bezier(1,0,0.5,0.1);
        }

        @keyframes rain-animate {
            to{top:65vh;width:calc(var(--water-size)*2);}
        }

        .rain .waves{
            position: absolute;
            top: 65vh;
            left: 50%;

            width:0px;
            aspect-ratio: 2/1;
            opacity: 0;
            border: 5px solid white;

            transform: translate(-50%,-50%);
            animation: wave-animate-lg var(--duration) calc(var(--duration) + var(--delay)) infinite;
        }
        .rain .waves::after{
            content: '';
            display: block;

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 0;
            aspect-ratio: 2/1;
            opacity: 0;
            border: 5px solid white;
            animation: wave-animate-sm var(--duration) calc(var(--duration) + var(--delay)) infinite;
        }
        @keyframes wave-animate-lg {
            0%  {opacity: 1;}
            50% {opacity: 0;}
            100%{width: 300px;border-width: 1px;border-radius: 300px/150px;}
        }
        @keyframes wave-animate-sm {
            0%  {opacity: 1;}
            50% {opacity: 0;}
            100%{width: 200px;border-width: 1px;border-radius: 300px/150px;}
        }
    </style>
</head>
<body>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
    <div class="rain">
        <div class="drop"></div>
        <div class="waves"></div>
    </div>
</body>
</html>